<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>更换头像</span>
    </div>

    <img  v-if="!avatar" class="the_img" src="../../assets/images/avatar.jpg" alt="" />
    <img  v-else   class="the_img" :src="avatar" alt=""/>

    <div class="btn-box">
        <input type="file" accept="image/*" style="display: none" ref="iptRef" @change="onFileChange" />
        <el-button type="primary" icon="el-icon-plus" @click="chooseImg">选择图片</el-button>
        <el-button type="success" icon="el-icon-upload" :disabled="avatar === ''" @click="uploadAvator">上传头像</el-button>
    </div>
  </el-card>
</template>

<script>
  import {updateUserPicAPI} from "@/api"
  export default{
    name:"UserAvatar",
    data(){
      return{
        avatar:""
      }
    },
    methods:{
      chooseImg(){
        //移花接木,通过chooserImg函数获取file的原生dom并调用下面的函数，从而打开文件选择目录
        this.$refs.iptRef.click()
      },
      //当选择框中选择文件后触发该函数
      onFileChange(e){
        //获取选择的文件
        const files=e.target.files
        if(files.length===0){
          //没有选择图片
          this.avatar=''
        }else{
          //选择了图片
          //目标，要把选择的文件放到img标签上做纯前端预览
          //img标签的src只接受链接地址(或相对路径)以及base64的字符串
          //方案1,src转地址
          //this.avatar=URL.createObjectURL(files[0])
          //方案2，转base64字符串
          //1.创建Filereader对象
          const fr=new FileReader()
          //2.使用readasDataURL函数，开始读取文件内容
          fr.readAsDataURL(files[0])
          //3.监听fr的onload事件
          fr.onload= e =>{
            //4.通过e.target.result读取到的结果便是字符串格式(base64)
            this.avatar=e.target.result
          }
        }
      },
      async uploadAvator(){
        const {data:res}=await updateUserPicAPI(this.avatar)
        if(res.code!==0)  return this.$message.error(res.message)
        this.$message.success(res.message)
        this.$store.commit("updateUserPic",this.avatar)
      }

    }
  }
</script>

<style scoped lang="less">
  .btn-box {
    margin-top: 10px;
  }
  .preview {
    object-fit: cover;
  }
  .the_img{
      width: 350px;
      height: 350px;
  }
</style>
